<template>
    <div class="tabbar">
        <router-link to="/" class="link ahome">
            首页
        </router-link>
        <router-link to="/category" class="link acate">
            分类
        </router-link>
        <router-link to="/ball" class="link aball">
            星球
        </router-link>
        <router-link to="/cart" class="link acart">
            购物车 
        </router-link>
        <router-link to="/user" class="link auser">
            我的
        </router-link>
    </div>
</template>
<style scoped lang="scss">
.tabbar{
    height: 1rem;
    display: flex;
    background-color: #fff;
    .link{
        flex:1;
        color:#777;
        text-decoration: none;
        text-align: center;
        font-size: .18rem;
        &::before{
            content:"";
            display: block;
            height: .5rem;
            width: .5rem;
            margin: 3px auto;
            background-image: url('../assets/home.png');
            background-size: cover;
            background-repeat: no-repeat;
        }
    }
    .acate::before{
        background-image: url('../assets/cat.png');
    }
    .acart::before{
        background-image: url('../assets/cart.png');
    }
    .auser::before{
        background-image: url('../assets/user.png');
    }
    .aball::before{
        background-image: url('../assets/ball.png');
    }
    .router-link-exact-active{
        color:#f70;
    }
    .router-link-exact-active.ahome::before{
        background-image: url('../assets/home-h.png');
    }
    .router-link-exact-active.acate::before{
        background-image: url('../assets/cat-h.png');
    }
    .router-link-exact-active.acart::before{
        background-image: url('../assets/cart-h.png');
    }
    .router-link-exact-active.auser::before{
        background-image: url('../assets/user-h.png');
    }
    .router-link-exact-active.aball::before{
        background-image: url('../assets/ball-h.png');
    }
}
</style>